console.log( "===== simpread option about load =====" )

import {br,browser} from 'browser';

const style = {

    root: {
        padding: '50px 0',

        backgroundColor: '#fff',

        fontSize: '1.6rem',
        color: 'rgba(51, 51, 51, 0.87)',

        boxShadow: '0 1px 3px rgba(0, 0, 0, .12)',
    },

    title: {
        fontSize: '2rem',
        fontWeight: 800,
    },

    badges: {
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'center',

        margin: '1.2em 0',
    },

    img: {
        padding: '5px',
    },

    stat: {
        color: '#ff3f80',
        fontWeight: 600
    },

    href: {
        color: 'rgba(51, 51, 51, 0.87)',
    },

    link: {
        borderBottom: '1px solid #4285f4',
    },

},
urls = {

    href: {
        version: "https://github.com/Kenshin/simpread/releases",
        website: "http://ksria.com/simpread",
        githubstar: "https://github.com/Kenshin/simpread",
        changelog: "http://ksria.com/simpread/changelog.html",
        feedback: "https://github.com/kenshin/simpread/issues",
        issues: "https://github.com/kenshin/simpread/issues",
    },

    badges: {
        version: "",
        website: "",
        githubstar: "",
        changelog: "",
    },
};

export default class About extends React.Component {

    render() {
        const href = br.isFirefox() ? "https://addons.mozilla.org/addon/simpread?src=external-ext" : "https://chrome.google.com/webstore/detail/simpread-reader-view/ijllcpnolfcooahcekpamkbidhejabll/reviews";
        return (
            <div id="labs" style={{ width: '100%' }}>
                <div style={ style.root }>
                    <image src={browser.runtime.getURL("assets/images/icon128.png")}></image>
                    <div style={ style.title }>简悦 SimpRead</div>
                    <div>为你提供「如杂志般沉浸式阅读体验」的扩展</div>
                    <div style={ style.badges }>
                        <a href={ urls.href.version      } target="_blank"><img style={ style.img } src={ urls.badges.version }/></a>
                        <a href={ urls.href.website      } target="_blank"><img style={ style.img } src={ urls.badges.website }/></a>
                        <a href={ urls.href.githubstar   } target="_blank"><img style={ style.img } src={ urls.badges.githubstar }/></a>
                        <a href={ urls.href.changelog    } target="_blank"><img style={ style.img } src={ urls.badges.changelog }/></a>
                    </div>

                    <div>
                        <a style={ style.link } href="http://ksria.com/simpread">简悦</a> 的初衷：还原一个干净的阅读空间，提升你的阅读体验。<br/>
                        截至到目前为止，简悦已经适配了 <spn style={ style.stat }>{ this.props.site }</spn> 类网址，详细请看 <a style={ style.link } href="https://simpread.ksria.cn/sites/" target="_blank">这里</a>。<br/>
                        自从 <span style={ style.stat }>{ this.props.option.create && this.props.option.create.split(" ")[0] }</span> 安装后，共使用了 <spn style={ style.stat }>{ this.props.statistics.focus }次</spn> 聚焦模式，以及 <span style={ style.stat }>{ this.props.statistics.read }次</span> 阅读模式。<br/>
                        </div>
                </div>

                <div className="label" data-head-level="h1">帮助</div>
                <div style={{ 'padding-top': '10px', 'position': 'relative' }} className="lab">
                    <div className="more">
                        <div><a style={style.href} target="_blank" href="http://sr.ksria.cn/zhifu_m2.png">如果简悦可以解决你在阅读上痛点，可以请我喝杯咖啡</a></div>
                        <span className="desc">简悦是一个免费且开源的项目</span>
                        <span className="arrow"></span>
                    </div>
                </div>
                <div style={{ 'margin-top': '10px', 'position': 'relative' }} className="lab">
                    <div className="more">
                        <div><a style={style.href} target="_blank" href={href}>如果简悦对你有所帮助，请帮忙投票</a></div>
                        <span style={{ bottom: "11px" }} className="arrow"></span>
                    </div>
                </div>
                <div style={{ 'margin-top': '10px', 'position': 'relative' }} className="lab">
                    <div className="more">
                        <a style={style.href} target="_blank" href="https://github.com/Kenshin/simpread">简悦是一个开源的产品，代码托管在 Github 上</a>
                        <span style={{ bottom: "11px" }} className="arrow"></span>
                    </div>
                </div>
                <div style={{ 'margin-top': '10px', 'position': 'relative' }} className="lab">
                    <div className="more">
                        <a style={style.href} target="_blank" href="http://ksria.com/simpread/guide/">第一次使用简悦？或者并不了解「阅读模式」请前往 <b>新手入门</b></a>
                        <span style={{ bottom: "11px" }} className="arrow"></span>
                    </div>
                </div>
                <div style={{ 'margin-top': '10px', 'position': 'relative' }} className="lab">
                    <div className="more">
                        <a style={style.href}><b onClick={()=>this.props.onClick("welcome")}>重看引导页面</b> 或者 <a style={style.href} target="_blank" href="http://ksria.com/simpread/welcome/version_1.1.4.html"><b>重看当前版本</b></a> 的功能介绍</a>
                        <span style={{ bottom: "11px" }} className="arrow"></span>
                    </div>
                </div>

                <div className="label" data-head-level="h1">其它平台的简悦</div>
                <div style={{ 'padding-top': '10px', 'position': 'relative' }} className="lab">
                    <div className="more">
                        <div><a style={style.href} target="_blank" href="http://ksria.com/simpread/#downloads">简悦已经上线了 Firefox 版，UserScript 版，JSBox 版，总有一款适合你</a></div>
                        <span className="desc">包括但不限于：Chrome · Firefox · Safari · Apple Safari · Microsoft Edge · Opera · iPhone · iPad</span>
                        <span className="arrow"></span>
                    </div>
                </div>

                <div className="label" data-head-level="h1">反馈</div>
                <div style={{ 'padding-top': '10px', 'position': 'relative' }} className="lab">
                    <div className="more">
                        <a style={style.href} target="_blank" href="https://github.com/kenshin/simpread/issues">如果有任何问题请提交 issues</a>
                        <span style={{ bottom: "11px" }} className="arrow"></span>
                    </div>
                </div>
                <div style={{ 'margin-top': '10px', 'position': 'relative' }} className="lab">
                    <div className="more">
                        <a style={style.href} target="_blank" href="https://t.me/simpread">现在就加入 Telegram 群，获取简悦的第一手资料</a>
                        <span style={{ bottom: "11px" }} className="arrow"></span>
                    </div>
                </div>
                <div style={{ 'margin-top': '10px', 'position': 'relative' }} className="lab">
                    <div className="more" style={{cursor: 'default'}}>
                        可以在 <a style={style.href} target="_blank" href="https://twitter.com/wanglei001"><b>Twitter</b></a> 或 <a style={style.href} target="_blank" href="https://weibo.com/23784148"><b>新浪微博</b></a> 上关注我
                        <span style={{ bottom: "11px" }} className="arrow"></span>
                    </div>
                </div>

                <div className="label" data-head-level="h1">其它作品</div>
                <div style={{ 'margin-top': '10px', 'position': 'relative' }} className="lab">
                    <div className="more">
                        <a style={style.href} target="_blank" href="http://ksria.com/gnvm">GNVM - 使用 Go 语言编写的 Node.js 多版本管理器</a>
                        <span style={{ bottom: "11px" }} className="arrow"></span>
                    </div>
                </div>
                <div style={{ 'margin-top': '10px', 'position': 'relative' }} className="lab">
                    <div className="more">
                        <a style={style.href} target="_blank" href="http://ksria.com/emoji">+Emoji - 一个 简单、可靠、纯粹、中文语义化的 Emoji 扩展</a>
                        <span style={{ bottom: "11px" }} className="arrow"></span>
                    </div>
                </div>
                <div style={{ 'margin-top': '10px', 'position': 'relative' }} className="lab">
                    <div className="more">
                        <a style={style.href} target="_blank" href="http://ksria.com/sov2ex">SOV2EX - 一个便捷的 V2EX 站内搜索引擎（前端界面）</a>
                        <span style={{ bottom: "11px" }} className="arrow"></span>
                    </div>
                </div>
                <div style={{ 'margin-top': '10px', 'position': 'relative' }} className="lab">
                    <div className="more">
                        <a style={style.href} target="_blank" href="http://ksria.com/simptab">简 Tab - 极简的 Chrome 新标签页扩展，望你每次打开都有好心情</a>
                        <span style={{ bottom: "11px" }} className="arrow"></span>
                    </div>
                </div>
            </div>
        )
    }
}